import React from 'react';
import styled from 'styled-components';
import { commify } from 'ethers/lib/utils';
import useBasisCash from '../../../hooks/useBasisCash';
import useLPBonusRatio from "../../../hooks/useLPBonusRatio";
import useShareBonusRatio from "../../../hooks/useShareBonusRatio";
import useBanks from '../../../hooks/useBanks';
import LPCard from './LPCard';
import config from '../../../config';

interface DailyCardProps {
  tvl: number,
  group: string,
}

const DailyCard: React.FC<DailyCardProps> = ({
  tvl, 
  group,
}) => {
  const [banks] = useBanks();
  const basisCash = useBasisCash();
  const lpBonusRatio = useLPBonusRatio();
  const shareBonusRatio = useShareBonusRatio();
  const activeBanks = banks.filter((bank) => (!bank.finished && bank.earnTokenName == 'SHARE' && bank.group == group));
  const destoryAddr = config.plane[group].destoryAddr;

  return (<>
    {
      config.plane[group].bankStartAt && config.plane[group].bankStartAt.getTime() <= Date.now() 
      ?
      <DivcaoHong>
            <Divtips>s{group.toUpperCase()}星球</Divtips>
            <Divcaori>
                <DivFlex>
                  <DivFlexspanTit>锁仓量 : $ <DivFlexspanTit1>{commify(Number(tvl).toFixed(2))}</DivFlexspanTit1></DivFlexspanTit>
                  <DivFlexspanTit> </DivFlexspanTit>
                </DivFlex>
                <DivFlex>
                  {activeBanks.map((bank, i) => (
                    <React.Fragment key={bank.name}>
                      <LPCard bank={bank} />
                    </React.Fragment>
                  ))}
                </DivFlex>
            </Divcaori>
            <Divcaoxia>
              {
                config.plane[group].boardroomLaunchesAt && config.plane[group].boardroomLaunchesAt.getTime() <= Date.now() 
                ?
                <DivFlex1>
                  <DivRow>
                    <DivVlockck>s{group.toUpperCase()}董事会</DivVlockck>
                    <DivFlexspan>LP日化收益率 : <DivFlexspan1>{(100 * lpBonusRatio).toFixed(4) + "%"}</DivFlexspan1></DivFlexspan>
                  </DivRow>
                  <DivFlexspan>SHARE日化收益率 : <DivFlexspan1>{(100 * shareBonusRatio).toFixed(4) + "%"}</DivFlexspan1></DivFlexspan>
                </DivFlex1>
                :
                <>
                </>
              }
                
                {config.plane[group].destoryAddr ?
                <>
                <DivFlex1>
                  <DivRow>
                    <DivVlockck>销毁中继地址</DivVlockck>
                    <DivFlexspan>0x6a48b4181903549194</DivFlexspan>
                  </DivRow>
                </DivFlex1>

                <DivFlex1>
                  <DivRow>
                    <DivVlockck>销毁中继数量</DivVlockck>
                    <DivFlexspan>30,000 </DivFlexspan>
                  </DivRow>
                </DivFlex1>
                </>
                :
                <></>
                }

            </Divcaoxia>
        </DivcaoHong>
        :
        <></>
    }
    </>
  );
};

const DivTopCont = styled.div`
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
`

const Divtips = styled.div`
  position: absolute;
  top: 20px;
  left: 0;
  width: 124px;
  text-align: center;
  background: #2FEA99;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  font-style: italic;
  color: #03112B;
  line-height: 30px;
  @media (max-width: 768px) {
    position: initial;
    padding-bottom: 10px;
  }
`

const DivVlockck = styled.div`
  width: 140px;
  text-align: center;
  background: #FFFFFF;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #000000;
  line-height: 34px;
  margin-right: 15px;
`

const DivRow = styled.div`
display: flex;
flex-direction: row;
align-items: center;
@media (max-width: 768px) {
  flex-direction: column;
  align-items: start;
}
`

const Divcaori = styled.div`
  padding-left: 180px;
  padding-right: 120px;
  @media (max-width: 768px) {
    padding-left: 10px;
    padding-right: 0;
  }
`

const Divcaoxia = styled.div`
padding-left: 48px;
padding-right: 120px;
@media (max-width: 768px) {
  padding-left: 10px;
  padding-right: 0;
}
`

const DivcaoHong = styled.div`
position: relative;
padding: 20px 0;
width: 900px;
border: 1px solid #175B3D;
@media (max-width: 768px) {
  width: 100%;
}
`

const DivFlexspan = styled.span`
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 40px;
  @media (max-width: 768px) {
    font-size: 12px;
  }
`

const DivFlexspanTit = styled.span`
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #2FEA99;
  line-height: 27px;
`

const DivFlexspanTit1 = styled.span`
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #2FEA99;
  line-height: 27px;
`

const DivFlexspan1 = styled.span`
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #2FEA99;
`

const DivFlex = styled.div`
display: flex;
flex: 1;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
    align-items: center;
`

const DivFlex1 = styled.div`
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
    align-items: center;
    @media (max-width: 768px) {
      flex-direction: column;
      align-items: start;
    }
`;

export default DailyCard;
